<template>
  <div class="coach-dashboard">
    <h2>教练中心</h2>

    <!-- 个人信息 -->
    <el-card class="coach-info-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
        </div>
      </template>
      <div class="coach-info">
        <el-avatar :size="100" :src="baseUrl + coachInfo.avatar" />
        <div class="info-details">
          <p><strong>姓名：</strong>{{ coachInfo.name }}</p>
          <p><strong>手机号：</strong>{{ coachInfo.phone }}</p>
          <p><strong>邮箱：</strong>{{ coachInfo.email }}</p>
          <p><strong>特长：</strong>{{ coachInfo.specialty }}</p>
        </div>
      </div>
    </el-card>

    <!-- 我的课程 -->
    <el-card class="courses-card">
      <template #header>
        <div class="card-header">
          <span>我的课程</span>
          <el-button type="primary" @click="loadCourses">刷新</el-button>
        </div>
      </template>
      <el-table :data="courses" stripe>
        <el-table-column prop="name" label="课程名称" />
        <el-table-column prop="room" label="教室" />
        <el-table-column prop="startTime" label="上课时间" />
        <el-table-column prop="duration" label="时长(分钟)" />
        <el-table-column prop="bookedCount" label="预约人数" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="viewCourseMembers(scope.row)">查看学员</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 学员列表对话框 -->
    <el-dialog v-model="membersDialogVisible" title="课程学员列表" width="600">
      <el-table :data="courseMembers" stripe>
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="email" label="邮箱" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '@/util/api'
import baseUrl from '@/util/constant'
import { ElMessage } from 'element-plus'

const coachInfo = ref({})
const courses = ref([])
const membersDialogVisible = ref(false)
const courseMembers = ref([])
const selectedCourse = ref(null)

// 获取教练信息
async function loadCoachInfo() {
  try {
    const resp = await api({
      url: '/coaches/profile',
      method: 'get'
    })

    if (resp.success) {
      coachInfo.value = resp.data
    } else {
      ElMessage.error('获取个人信息失败')
    }
  } catch (error) {
    ElMessage.error('获取个人信息失败')
  }
}

// 加载课程信息
async function loadCourses() {
  try {
    const resp = await api({
      url: '/courses/my',
      method: 'get'
    })

    if (resp.success) {
      courses.value = resp.data
    } else {
      ElMessage.error('获取课程信息失败')
    }
  } catch (error) {
    ElMessage.error('获取课程信息失败')
  }
}

// 查看课程学员
async function viewCourseMembers(course) {
  selectedCourse.value = course
  try {
    const resp = await api({
      url: `/courses/${course.id}/members`,
      method: 'get'
    })

    if (resp.success) {
      courseMembers.value = resp.data
      membersDialogVisible.value = true
    } else {
      ElMessage.error('获取学员信息失败')
    }
  } catch (error) {
    ElMessage.error('获取学员信息失败')
  }
}

onMounted(() => {
  loadCoachInfo()
  loadCourses()
})
</script>

<style scoped>
.coach-dashboard {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coach-info {
  display: flex;
  gap: 30px;
  align-items: center;
}

.info-details p {
  margin: 10px 0;
}

.courses-card {
  margin-top: 20px;
}
</style>
